<template>
  <nav>
    <ul class="nav-footer">
      <router-link to="/movies" tag="li" active-class="active">
        <b>&#xe8ae;</b>
        <span>电影</span>
      </router-link>
      <router-link to="/render-cinema" tag="li" active-class="active">
        <b>&#xe8c0;</b>
        <span>影院</span>
      </router-link>
      <router-link to="/my" tag="li" active-class="active">
        <b>&#xe62b;</b>
        <span>我的</span>
      </router-link>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Footer",
  components: {},
  computed: {},
  data() {
    return {}
  },
  mounted() {

  },
  methods: {},

}
</script>

<style lang="scss" scoped>
@import '../assets/scss/variable.scss';
@import '../assets/scss/mixin.scss';

@font-face {
  font-family: 'iconfont';
  src: url('../assets/icons/iconfont.eot');
  src: url('../assets/icons/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../assets/icons/iconfont.woff2') format('woff2'),
  url('../assets/icons/iconfont.woff') format('woff'),
  url('../assets/icons/iconfont.ttf') format('truetype'),
  url('../assets/icons/iconfont.svg#iconfont') format('svg');
}


ul.nav-footer {
  height: 0.44rem;
  display: flex;
  box-sizing: border-box;
  @include border-top-1px;

  > li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.12rem;

    &.active {
      color: $primary-color;
    }

    @include icon;

    b {
      font-size: 0.24rem;
    }
  }
}

</style>